<template>
    <div>
      <!-- unique-opened -->
      <el-scrollbar class="scrollbar-wrapper">
        <el-menu router ref="navMenu" :default-active="$route.path" :collapse="isCollapse" @select="select" @open="open" @close="close" :class="isCollapse ? 'collapse-menu' : ''">
          <!-- 一级导航 -->
          <template v-for="menu in menus">
            <div v-if="menu.meta.isMenu == true" :key="menu.name">
              <!-- 一级导航：有子页面 -->
              <el-submenu v-if="menu.children && menu.children.length > 0" :id="menu.name" :key="menu.name" :index="menu.path" class="current-sub-menu-item">
                <template slot="title">
                  <i :class="getIcon(menu)"></i>
                  <span>{{ menu.meta.title }}</span>
                </template>
                <!-- 二级导航 -->
                <template v-for="childMenu in menu.children">
                  <div v-if="childMenu.meta.isMenu == true" :key="childMenu.name">
                    <el-submenu
                      v-if="childMenu.meta.isMenu == true && childMenu.children && childMenu.children.length > 0"
                      :id="childMenu.name"
                      :key="childMenu.name"
                      :index="childMenu.path"
                      class="current-sub-menu-item"
                    >
                      <template slot="title">
                        <i :class="getIcon(childMenu)"></i>
                        <span>{{ childMenu.meta.title }}</span>
                      </template>
                      <el-menu-item v-for="lastMenu in childMenu.children" :key="lastMenu.name" :index="lastMenu.path" class="child-sub-menu">
                        <i :class="(lastMenu.meta && lastMenu.meta.icon) || 'el-icon-document'"></i>
                        <span slot="title">{{ lastMenu.meta.title }}</span>
                      </el-menu-item>
                    </el-submenu>
  
                    <el-menu-item v-else :key="childMenu.name" :id="childMenu.name" :index="childMenu.path" class="child-sub-menu-item">
                      <i :class="(childMenu.meta && childMenu.meta.icon) || 'el-icon-document'"></i>
                      <span slot="title">{{ childMenu.meta.title }}</span>
                    </el-menu-item>
                  </div>
                </template>
              </el-submenu>
              <!-- 一级导航：无子页面 -->
              <el-menu-item v-else :id="menu.name" :key="menu.name" :index="menu.path" class="current-sub-menu-item">
                <i :class="(menu.meta && menu.meta.icon) || 'el-icon-folder'"></i>
                <span slot="title">{{ menu.meta.title }}</span>
              </el-menu-item>
            </div>
          </template>
        </el-menu>
      </el-scrollbar>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Vue, Watch } from 'vue-property-decorator'
  import { State, namespace, Mutation } from 'vuex-class'
  import { get, cloneDeep } from 'lodash'
  
  const vuexLogin = namespace('Login')
  @Component({
    components: {}
  })
  export default class Index extends Vue {
    @vuexLogin.State loginUser: any
    @State routeTabs: any
    @State isCollapse: any
    @Mutation SET_ROUTE_TABS
    menus: any = {}
    opened: any[] = []
  
    collapseTitle: String = ''
    created() {
      this.menus = cloneDeep(get(this.$router, 'options.routes[1].children', []))
      // this.menus.splice(1, this.menus.length - 1)
  
      const opened = sessionStorage.getItem('opened')
      // console.log(opened)
      this.opened = opened ? opened.split(',') : []
      if (Number(sessionStorage.getItem('collapsed'))) {
        // 折叠状态
        this.$store.commit('SET_IS_COLLAPSE', true)
        this.collapseTitle = '展开'
      } else {
        // 展开状态
        this.$store.commit('SET_IS_COLLAPSE', false)
        this.collapseTitle = '折叠'
      }
    }
    mounted() {
      this.opened &&
        this.opened.forEach((x: string) => {
          // @ts-ignore
          this.$refs.navMenu.open(x)
        })
    }
    select(index: any, indexPath: any) {
      // console.log(index, indexPath)
      // console.log(this.routeTabs)
      // this.routeTabs.push(index)
      // this.SET_ROUTE_TABS(this.routeTabs)
      // console.log(this.routeTabs)
    }
    open(key: any, keyPath: any) {
      // console.log(key, keyPath)
      this.opened = keyPath
      // console.log(this.opened)
      sessionStorage.setItem('opened', this.opened.toString())
    }
    close(key: any, keyPath: any) {
      // console.log(key, keyPath)
      // console.log(this.opened)
      // let b = new Set(keyPath)
      // this.opened = this.opened.filter(x => !b.has(x))
      this.opened = this.opened.filter(x => x !== key)
      // console.log(this.opened)
      sessionStorage.setItem('opened', this.opened.toString())
    }
    getIcon(menu: any) {
      const opened = this.opened.includes(menu.path)
      return (menu.meta && menu.meta.icon) || (opened ? 'el-icon-folder-opened' : 'el-icon-folder')
    }
    toggleCollapse() {
      if (this.isCollapse) {
        sessionStorage.setItem('collapsed', '0') // 由折叠变为展开
        this.collapseTitle = '折叠'
      } else {
        sessionStorage.setItem('collapsed', '1')
        this.collapseTitle = '展开'
      }
      this.$store.commit('SET_IS_COLLAPSE', !this.isCollapse)
    }
  }
  </script>
  
  <style lang="scss" scoped>
  @import '@/assets/styles/variables.scss';
  .collapse {
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: $sideBarWidth;
    margin-top: -20px;
    width: 6px;
    height: 40px;
    background: #efefef;
    border: 1px solid #e4e7ed;
    border-left: none;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
    z-index: 1001;
    i {
      position: absolute;
      top: 14px;
      left: -3px;
      font-size: 12px;
      color: #ccc;
    }
    &:hover {
      background: #ddd;
    }
    &:hover i {
      color: #666;
    }
  }
  .collapse-menu {
    width: $sideBarCollapseWidth;
  }
  .collapse-arrow {
    left: $sideBarCollapseWidth !important;
  }
  .scrollbar-wrapper {
    border-top: 1px solid rgb(233, 233, 233);
    margin-top: 10px;
    min-height: 100%;
    width: $sideBarWidth;
    position: fixed;
    top: $headerHeight;
    bottom: 0;
    left: 0;
    overflow-x: hidden !important;
    overflow-y: auto;
    .el-menu {
      margin-bottom: 60px;
      .el-menu-item.is-active {
        color: #fff;
        background: #e60013;
      }
    }
  }
  </style>
  